<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="postForm">
        <el-form-item label="姓名">
          <el-input v-model="postForm.name" clearable placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="postForm.phone" clearable placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="postForm.identityCard" clearable placeholder="请输入身份证" />
        </el-form-item>
        <el-form-item label="职务">
          <el-input v-model="postForm.post" clearable placeholder="请输入职务" />
        </el-form-item>
        <el-form-item label="所学专业">
          <el-input v-model="postForm.profession" clearable placeholder="请输入所学专业" />
        </el-form-item>
        <!-- <el-form-item label="职业资格">
          <el-input v-model="postForm.professionalTitle" clearable placeholder="请输入职业资格" />
        </el-form-item> -->
        <el-form-item label="专家库">
          <el-select v-model="postForm.databaseId" clearable placeholder="请选择专家库">
            <el-option v-for="item in ZJKList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="addExpert">新增</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="postForm">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" style="margin-right: 10px" @click="downloadExportExcel">下载导入模版</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="openImportInfo">导入专家</el-button>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="expertInfo">导出专家</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-form ref="form" :model="form" label-width="80px" /> -->
      <el-table :data="tableData.list" style="width: 100%">
        <el-table-column align="center" type="index" label="序号" />
        <el-table-column align="center" prop="name" label="姓名" />
        <el-table-column align="center" prop="category" label="评审类别" />
        <el-table-column align="center" prop="databaseName" label="所属专家库" />
        <el-table-column align="center" prop="phone" label="电话" />
        <el-table-column align="center" prop="identityCard" label="身份证" />
        <el-table-column align="center" prop="post" label="职务" />
        <el-table-column align="center" prop="profession" label="所学专业" />
        <el-table-column align="center" prop="professionalTitle" label="执业资格" />
        <el-table-column align="center" prop="createTime" label="创建时间" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editExpert(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="removedExpert(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--
          current-page:代表的是当前第几页
          total：代表分页器一共需要展示多少条数据
          page-size：代表每页默认展示数据条数
          page-sizes：代表可以设置每一页需要展示多少条数据
          layout：可以实现分页器布局
          @current-change:当页码发生变化触发
          @size-change：当每页展示条数发送变化触发
         -->
      <el-pagination :current-page="postForm.currentPage" :total="tableData.total" :page-size="postForm.pageSize" :page-sizes="[1, 3, 5, 10]" style="padding: 20px 0" layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </el-card>
    <formDialog :close-modal="false" :title="dialog_form.title" :visible="dialog_form.visible" :data-source="dialog_form.form" :get-list="loadData" @close="closeFormDialog" />
    <!-- 专家导入 -->
    <el-dialog width="40%" title="专家导入" :visible.sync="expertImportDialog.expertVisible" :before-close="importDialogClose">
      <el-form :inline="true" :model="expertImportDialog.form">
        <el-form-item label="请选择专家库">
          <el-select v-model="databaseId" placeholder="导入前请选择专家库" clearable>
            <el-option v-for="item in ZJKList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload ref="upload" class="upload-demo" style="display: flex" action="" :limit="1" :http-request="readExcel" :auto-upload="true" :show-file-list="false">
            <el-button type="primary">请选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { expertApi } from '@/api/expert'
import formDialog from './components/formDialog.vue'
export default {
  name: 'Dashboard',
  components: { formDialog },
  data() {
    return {
      expertImportDialog: {
        form: {},
        expertVisible: false
      },
      // 搜索
      postForm: {
        currentPage: 1,
        pageSize: 10
      },
      // 表格
      tableData: {
        list: [],
        total: 0
      },

      // dialog框
      dialog_form: {
        visible: false,
        form: {},
        title: ''
      },
      // 专家库列表
      ZJKList: [],
      // 专家库id
      databaseId: '',
      // 提交的数据
      initForm: {
        category: '',
        createTime: '',
        databaseId: '',
        id: '',
        databaseName: '',
        identityCard: '',
        name: '',
        phone: '',
        post: '',
        profession: '',
        professionalTitle: '',
        remark: '',
        removed: '',
        updateTime: ''
      }
    }
  },
  computed: {},
  created() {
    // if (this.$route.query.databaseId) {
    //   this.postForm.databaseId = this.$route.query.databaseId
    //   this.loadData(this.postForm)
    // } else {
    //   this.loadData(this.postForm)
    // }
    this.loadData(this.postForm)

    this.loadExpertData({ currentPage: 1, pageSize: 9999 })
  },
  methods: {
    openImportInfo() {
      this.expertImportDialog.expertVisible = true
    },
    importDialogClose() {
      this.expertImportDialog.expertVisible = false
    },
    // 下载模板
    downloadExportExcel() {
      // 本地下载方法，文件放在public目录里
      const a = document.createElement('a')
      a.href = './template.xlsx'
      // 路径中'/'为根目录，即index.html所在的目录
      a.download = 'template.xlsx'
      a.click()

      // window.location.href = 'http://zctest.wzyunzhi.cn:7070/expertFile/model/template.xlsx'
    },
    // 导入专家
    readExcel(params) {
      console.log(params)
      if (!/\.(xlsx)$/.test(params.file.name.toLowerCase())) {
        this.$message({
          message: '只能上传.xlsx格式的文件!',
          type: 'error'
        })
        this.$refs.upload.clearFiles()
        return
      }
      if (!this.databaseId) {
        this.$message.error('请选择专家库')
        this.$refs.upload.clearFiles()
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '上传解析中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const fd = new FormData()
      fd.append('file', params.file)
      const databaseId = {
        databaseId: this.databaseId
      }
      expertApi.importInformation(databaseId, fd).then(res => {
        loading.close()
        this.loadData(this.postForm)
        this.$refs.upload.clearFiles()
        this.importDialogClose()
      })
    },
    // 导出
    expertInfo() {
      const loading = this.$loading({
        lock: true,
        text: '导出中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.postForm.pageSize = 999
      expertApi.exportInformation(this.postForm).then(res => {
        console.log(res)
        loading.close()
        this.postForm.pageSize = 10
      })
    },
    // 搜索
    search() {
      this.loadData(this.$filNull(this.postForm))
    },
    // 获取专家列表
    loadData(postForm) {
      expertApi.loadExpertInfo(postForm).then(res => {
        const { data, msg, result } = res
        if (result === 1) {
          this.tableData.list = data.list
          this.tableData.total = data.total
        } else if (result === 0) {
          this.$message.warning(msg)
          this.tableData.list = []
          this.tableData.total = 0
        }
      })
    },
    // 获取专家库列表
    loadExpertData(postForm) {
      expertApi.loadExpert(postForm).then(res => {
        const { data, msg, result } = res
        if (result === 1) {
          this.ZJKList = data.list
        } else if (result === 0) {
          // this.$message.warning(msg)
          this.ZJKList = []
        }
      })
    },
    // 页码点击事件handleCurrentChange
    handleCurrentChange(currentPage) {
      this.postForm.currentPage = currentPage
      this.loadData(this.postForm)
    },
    // 展示条数变化事件
    handleSizeChange(pageSize) {
      this.postForm.pageSize = pageSize
      this.loadData(this.postForm)
    },
    // 关闭dialog弹窗
    closeFormDialog() {
      this.dialog_form.visible = false
      this.initForm = {}
    },
    // 新增
    addExpert() {
      this.dialog_form.title = '新增'
      this.dialog_form.visible = true
      this.dialog_form.form = this.initForm
    },
    // 编辑
    editExpert(row) {
      this.dialog_form.title = '编辑'
      this.dialog_form.visible = true
      this.dialog_form.form = row
    },
    // 删除
    removedExpert(row) {
      this.$confirm('此操作将永久删除该专家库 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          expertApi.deExpertInfo(row.id).then(res => {
            const { result, msg, data } = res
            if (result == 1) {
              this.$message.success(msg)
              this.loadData(this.postForm)
            } else {
              this.$message.warning(msg)
              this.loadData(this.postForm)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
